<template>
  <div>
    <van-popup v-model:show="isShow" position="bottom">
      <div class="workBench-video">
        <div class="workBench-video-controlBar">
          <van-nav-bar left-arrow @click-left="backStep">
          </van-nav-bar>
        </div>
        <div class="workBench-video-content">
          <div class="workBench-video-content-title">
            <h3>标题</h3>
            <van-field
              v-model="title"
              type="text"
            />
          </div>
          <div class="workBench-video-content-desc">
            <h3>描述</h3>
            <van-field
              v-model="desc"
              type="textarea"
            />
          </div>
          <div class="workBench-video-content-videos">
            <h3>上传</h3>
            <van-uploader 
              v-model="file"
              :after-read="afterReadFile"
              max-count="1"
            />
          </div>
          <div class="workBench-video-content-cover">
            <h3>封面</h3>
            <van-uploader
              v-model="cover"
              :after-read="afterReadCover"
              max-count="1"
            />
          </div>
          <div class="workBench-video-content-tag">
            <h3>标签</h3>
            <van-cell title="标签" size="large" is-link @click="typeTag=true" :value="tag"/>
            <van-action-sheet v-model:show="typeTag" :actions="actionsTag" cancel-text="取消" @select="handleSelect" close-on-click-action>
            </van-action-sheet>
          </div>
          <div class="workBench-video-content-button">
            <van-button type="primary" @touchend="handleSubmit">提交</van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Popup, NavBar, Button, Uploader, Field, Cell, ActionSheet, Toast } from "vant";
import { toRef, ref, onMounted } from "vue";
import { getHobby,addVideo } from "@/service/user";
export default {
  components:{
    [Popup.name]:Popup,
    [NavBar.name]:NavBar,
    [Button.name]:Button,
    [Uploader.name]:Uploader,
    [Field.name]:Field,
    [Cell.name]:Cell,
    [ActionSheet.name]:ActionSheet
  },
  props:['isVideoShow'],
  setup(props){
    const isShow = toRef(props,'isVideoShow');
    const desc = ref('');
    const typeTag = ref(false);
    const actionsTag = ref([]);
    const title = ref('');
    const tag = ref('');
    const file = ref();
    const cover = ref();
    const handleSelect = val=>{
      tag.value = val.name
    }
    const afterReadFile = theFile=>{
      /* file.value = theFile; */
    }
    const afterReadCover = theFile=>{
      /* cover.value = theFile; */
    }
    const handleSubmit = ()=>{
      console.log('titleIs:',title);
      console.log('fileIs:',file.value[0]);
      console.log('coverIs:',cover.value[0]);
      console.log('descIs:',desc);
      console.log('tagIs:',tag);
      addVideo({
        title:title.value,
        desc:desc.value,
        videoFile:file.value[0],
        videoCover:cover.value[0],
        tag:tag.value
      }).then(res=>{
        title.value = "";
        file.value = [];
        cover.value = [];
        desc.value = '';
        tag.value = '';
        res.status == 200 ? Toast.success(res.message) : Toast.success('出错了');
      })
    }
    onMounted(()=>{
      getHobby().then(res=>{
        actionsTag.value = res.map(item=>{
        return {
          name:item.hobbyName
        }
      })
      })
    })
    return {
      isShow,
      typeTag,
      actionsTag,
      title,
      desc,
      tag,
      file,
      cover,
      handleSelect,
      afterReadFile,
      afterReadCover,
      handleSubmit
    }
  },
  methods:{
    backStep(){
      this.$store.commit('setIsVideoShow',false)
    }
  }
}
</script>
<style lang="less">
.workBench-video{
  width: 100%;
  padding-top: 50px;
  background: #EFEFEF;
}
.workBench-video-controlBar{
  position: fixed;
  width: 100%;
  height: 50px;
  background: #FFD260;
  top: 0;
  z-index: 999999;
}
.workBench-video-content{
  margin: 0 8px;
  div{
    h3{
      text-align:left;
      margin:4px 8px;
      padding: 0 4px;
      border-left: 4px solid orange;
    }
  }
  .workBench-video-content-videos{
    background: #fff;
    padding:8px 0;
    margin-bottom: 8px;
  }
  .workBench-video-content-cover{
    background: #fff;
    padding: 8px 0;
    margin-bottom:8px;
  }
  .workBench-video-content-title{
    background: #fff;
    padding: 8px 0;
    margin-bottom: 8px;
    input{
      border: 1px solid #EFEFEF;
    }
  }
  .workBench-video-content-desc{
    background: #fff;
    padding: 8px 0;
    margin-bottom: 8px;
    textarea{
      border: 1px solid #EFEFEF;
    }
  }
  .workBench-video-content-tag{
    background: #fff;
    padding:8px 0;
    margin-bottom: 8px;
  }
  .workBench-video-content-button{
    background: #fff;
    padding: 8px 0;
  }
}
</style>
